<template>
  <div class="cms-views-container bg-[#f6f6f6]">
    <CmsVideoHeader
      :title="type === 1 ? '分类' : '最新'"
      showSearch
      :text="{ color: '#48494D', backgroundColor: 'white' }"
    />
    <CmsFilterView
      :type="1"
      v-if="type === 1"
      novel
      @click="handleClick('filterCriteria')"
      :class="{ 'component-selected': select === 'filterCriteria' }"
    />

    <CmsNovelList :type="1" />
  </div>
</template>

<script setup lang="ts">
import { withDefaults } from 'vue'
import CmsComponents from '@cms/components'
import type { ComponentKeys } from '@cms/h5-editor'
const { CmsFilterView, CmsNovelList, CmsVideoHeader } = CmsComponents

withDefaults(defineProps<{ type: number; select?: ComponentKeys | undefined }>(), { type: 1 })

const emit = defineEmits<{
  (event: 'select', key: ComponentKeys): void
}>()

const handleClick = (key: ComponentKeys) => {
  emit('select', key)
}
</script>

<style scoped lang="less"></style>
